  <template>
    <div id='after-loan-wait'>
        
       
        <el-card class="box-card box-card-left">
            <div class="bcl-top bcl-top11">
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <!-- <el-input v-model="phone" class="inp" @change="keyupFn" placeholder="请输入内容" clearable></el-input> -->
                <input type="text" v-model="phone" placeholder="请输入内容" @keyup="keyupFn" class="searIpt">
                <!-- <el-button type="primary" class="btn" @click="search">搜索</el-button> -->
                <!-- <el-button type="primary" class="btn" @click="isSearch">高级搜索</el-button> -->
                  <el-popover
                      popper-class="alw_popper"
                      placement="bottom"
                      width="1051"
                      :offset="0"
                      height="336"
                      v-model="isPopover"
                      trigger="click">
                          <ul  class="nav5">
                                  <li>
                                      <div class="w320">
                                          <span class="nm">
                                            紧急联系人姓名:
                                          </span>
                                          
                                          <el-input
                                            class="elinp"
                                            placeholder="请输入姓名"
                                            v-model="input4"
                                            clearable>
                                          </el-input>
                                      </div>
                                      <div class="w320">
                                          <span class="nm">
                                            通讯录姓名:
                                          </span>
                                          
                                          <el-input
                                            class="elinp"
                                            placeholder="请输入姓名"
                                            v-model="input5"
                                            clearable>
                                          </el-input>
                                      </div>
                                      <div class="w320">
                                          <span class="nm">
                                            身份证号码:
                                          </span>
                                          
                                          <el-input
                                            class="elinp"
                                            placeholder="请输入身份证号"
                                            v-model="input6"
                                            clearable>
                                          </el-input>
                                      </div>
                                  </li>
                                  
                                  <li class="mrt20">
                                      <div class="w320">
                                          <span class="nm">
                                            紧急联系人电话:
                                          </span>
                                          
                                          <el-input
                                            class="elinp"
                                            placeholder="请输入电话号码"
                                            v-model="input7"
                                            clearable>
                                          </el-input>
                                      </div>
                                      <div class="w320">
                                          <span class="nm">
                                            通讯录号码:
                                          </span>
                                          
                                          <el-input
                                            class="elinp"
                                            placeholder="请输入电话号码"
                                            v-model="input8"
                                            clearable>
                                          </el-input>
                                      </div>
                                      <div class="w320">
                                      <span class="nm">
                                          标签:
                                      </span>
                                        <el-select v-model="value1" placeholder="所有"  @change="selectChange">
                                                <el-option
                                                    v-for="item in options1"
                                                    :key="item.value1"
                                                    :label="item.label"
                                                    :value="item.value1">
                                                </el-option>
                                        </el-select>
                                      </div>
                                  </li>
                                  <li class="mrt20">
                                      <div class="w320">
                                          <span class="nm">
                                            跟进时间大于:
                                          </span>
                                          <el-input
                                            class="elinp"
                                            placeholder="请输入天数"
                                            v-model="input9"
                                            clearable>
                                          </el-input>
                                      </div>
                                      <div class="w320">
                                          <span class="nm">
                                            逾期时间大于:
                                          </span>
                                          
                                          <el-input
                                            class="elinp"
                                            placeholder="请输入天数"
                                            v-model="input10"
                                            clearable>
                                          </el-input>
                                      </div>
                                  </li>
                                  <li style="margin-top:40px;text-align:center;"> 
                                      <el-button type="primary" class="btn1" style="margin-right:80px;" @click="reset">重置</el-button>
                                      <el-button type="primary" class="btn1" @click="search">搜索</el-button>
                                  </li>
                                </ul>
                      <el-button type="primary" class="btn3" slot="reference">高级搜索</el-button>
                    </el-popover>
                
                
            </div>
            <!-- <ul class="bcl-content">
                <loading v-show="loading"></loading>
                <li v-for="item in records" :id="item.id" @click="goAuthDetail(item.id)">
                    <span class="list1" style="text-algin:left;">
                        <span style="float:left; margin-left:16px;">
                            {{item.name}}
                        </span>
                        <span style="float:left;">
                            (111)
                        </span>
                    </span>
                    <span class="list2">
                            {{item.id}}
                    </span>
                </li>
            </ul> -->
            <loading v-show="isgoAuthDetail"></loading>
           <!--  <el-table
           v-show="!isgoAuthDetail"
           :data="records"
           @row-click="goAuthDetail"
           :stripe="true"
           style="width: 100%">
             <el-table-column  prop="name"></el-table-column>
             <el-table-column prop="source"></el-table-column>
             <el-table-column prop="mobile"></el-table-column>
             <el-table-column prop="operator"></el-table-column>
           </el-table>{
                    name:"谭晨超",
                    channel:"渠道号",
                    orderNumber:"110",
                    overdueTime:"13",
                    followTime:"10" 
                  }, -->
            <p class='no-data' v-show="recordsNull">暂无数据</p>
            <div class="tabdiv" v-show="!isgoAuthDetail">
                <ul v-for="item in records" class="tabnav" v-bind:class="{ 'activess': item.active }" @click="goAuthDetail(item)">
                  <li>
                    <span class="fl">{{item.name || placeholder}}({{item.channel || placeholder}})</span>
                    <span class="fr" >逾期 <span :class="[item.overDueDays? 'activeClass' : '',]">{{item.overDueDays || placeholder}}</span> 天</span>
                  </li>
                  <li>
                    <span class="fl" style="color:#0A8DDF;">{{item.phone || placeholder}} ( {{item.sex}} ) {{item.operatorTime}}</span>
                    <span class="fr" >跟进{{item.followDays || placeholder}}天</span>
                  </li>
                </ul>
            <el-pagination
            v-show="records.length"
            class="paga"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-size="10"
              :pager-count="5"
              layout="total, prev, pager, next, jumper"
              :total="total"
              :background="true">
            </el-pagination>
            </div>
        </el-card>
        <el-card class="box-card box-card-right">
            <ul class="bcr-top">
                <li>
                    <img style="width:66px;height:66px;" src="../images/authPerson.jpg" alt="">
                </li>
                <li class="po-re">
                    
                  <span class="clicksp" @click="isClick">逾期用户<i class="iconfont icon-arrow el-icon-arrow-down" style="margin-left:9px;"></i></span>
                    <popover 
                    id="ppclass"
                    ref="refpop"
                    v-show="popshow"
                    @close='emitClose'  
                    @confrm='emitConfirm'>
                       <span v-for="(item,index) in staArr" ref="span" :class="[item.isopen ? 'active' : 'noactive','mar']" @click.stop="clickActive(item,$event,index)">{{item.lableName}}</span>
                    </popover>
                    <span class="clicksp clicksp1">{{suspicious || placeholder}}客户</span>
                </li>
                <li>
                   <p>
                       <span>
                           借款金额:
                       </span>
                       <span>
                          {{ loanCheckUserDetailVO.applyAmount | toYuan}}元
                       </span>
                   </p>
                   <p class="mrt10">
                       <span>
                           借款期限:
                       </span>
                       <span>
                           {{ loanCheckUserDetailVO.applyCycle || placeholder}}天
                       </span>
                   </p>
                   <p class="mrt10">
                       <span>
                           认证分数:
                       </span>
                       <span>
                           {{ loanCheckUserDetailVO.confidence || placeholder}}
                       </span>
                   </p>
               </li>
               <li>
                  <p>
                       <span>
                            罚息金额:
                       </span>
                       <span>
                          {{ loanCheckUserDetailVO.oveAmount | toYuan}}元
                       </span>
                  </p>
                    <p class="mrt10">
                      <span>
                          应还总额:
                      </span>
                      <a :title="loanCheckUserDetailVO.repayAmount" >
                         {{loanCheckUserDetailVO.repayAmount | toYuan}}元
                      </a>
                  </p> 
                  <!-- <p class="mrt10">
                      <span>
                          认证分数:
                      </span>
                      <a :title="loanCheckUserDetailVO.confidence" >
                         {{loanCheckUserDetailVO.confidence || placeholder}}
                      </a>
                  </p>  -->
                   <!-- <p class="mrt10">
                       <span>
                           年利息:
                       </span>
                       <span>
                           {{ pageSize | toYuan}}
                       </span>
                   </p> -->
               </li>
               <!--  <li v-show="loanCheckUserDetailVO.status">
                   <div class="el-icon-check wh Success" v-if="loanCheckUserDetailVO.status=='PASS'"></div>
                   <div class="el-icon-close wh Danger" v-if="loanCheckUserDetailVO.status=='REJECT'"></div>
               </li> -->
            </ul>
            <div class="bcr-content">
                <el-tabs @tab-click="tabClick">
                  <el-tab-pane label="基本信息">
                    <loading v-show="isMsg"></loading>
                        <div class="jbxx" v-show="!isMsg">
                            <div class="cardBlack" v-show='loanCheckUserDetailVO.isBlackUserRisk'>
                            身份证命中触发黑名单
                        </div>
                      <p class='no-data' v-show="loanCheckUserDetailVO=='' ||records==''">暂无数据</p>
                      <div class="showis" v-show="loanCheckUserDetailVO!=''&&records!=''">
                      <div class="title">
                          个人基本信息
                      </div>
                          <ul class="nav beee">
                          <li>
                              <span>
                                  姓名:
                              </span>
                              <a :title="loanCheckUserDetailVO.name">
                                  {{loanCheckUserDetailVO.name || placeholder}}
                              </a>
                          </li>
                         <!--  <li>
                             <span>
                                 手机号:
                             </span>
                             <a :title="authCheckUserDetailVO.phone">
                                 {{authCheckUserDetailVO.phone || placeholder}}
                             </a>
                         </li> -->
                         <li>
                              <span>
                                  年龄:
                              </span>
                              <a :title="loanCheckUserDetailVO.age">
                                 {{loanCheckUserDetailVO.age || placeholder}}
                              </a>
                          </li>
                      </ul>
                      <ul class="nav">
                          <!-- <li>
                              <span>
                                  身份证号:
                              </span>
                              <a :title="authCheckUserDetailVO.idCard">
                                  {{authCheckUserDetailVO.idCard || placeholder}}
                              </a>
                          </li> -->
                          <li>
                              <span>
                                  Q Q号码:
                              </span>
                              <a :title="loanCheckUserDetailVO.qqNum">
                                  {{loanCheckUserDetailVO.qqNum || placeholder}}
                              </a>
                          </li>
                          <!-- <li>
                              <span>
                                  年龄:
                              </span>
                              <a :title="authCheckUserDetailVO.age">
                                 {{authCheckUserDetailVO.age || placeholder}}
                              </a>
                          </li> -->
                          <li>
                              <span>
                                  电子邮箱:
                              </span>
                              <a :title="loanCheckUserDetailVO.email">
                                 {{loanCheckUserDetailVO.email || placeholder}}
                              </a>
                          </li>
                      </ul>
                      <ul class="nav beee">
                          <!-- <li>
                              <span>
                                  身份证地址:
                              </span>
                              <a :title="authCheckUserDetailVO.address">
                                  {{authCheckUserDetailVO.address || placeholder}}
                              </a>
                          </li> -->
                          <li>
                              <span>
                                  身份证号:
                              </span>
                              <a :title="loanCheckUserDetailVO.idCard">
                                  {{loanCheckUserDetailVO.idCard || placeholder}}
                              </a>
                          </li>
                         <!--  <li>
                             <span>
                                 芝麻分:
                             </span>
                             <a :class="{red:authCheckUserDetailVO.zhimaScore}" :title="authCheckUserDetailVO.zhimaScore">
                                 {{authCheckUserDetailVO.zhimaScore || placeholder}}
                             </a>
                         </li> -->
                         <li>
                             <span>
                                 手机号:
                             </span>
                             <a :title="loanCheckUserDetailVO.phone" style="float:left;">
                                 {{loanCheckUserDetailVO.phone || placeholder}}
                             </a>
                             <span class="cuijc">
                               <el-button type="text" @click="oneSelfFn">催记</el-button>
                             </span>
                         </li>
                      </ul>
                     
                      <!-- <div class="title title1">
                          银行卡信息
                      </div> -->
                       <ul class="nav">
                          <li>
                              <span>
                                  现居住地址:
                              </span>
                              <a :title="loanCheckUserDetailVO.addressNow">
                                  {{loanCheckUserDetailVO.addressNow || placeholder}}
                              </a>
                          </li>
                      </ul>
                      <ul class="nav beee">
                          <!-- <li>
                              <span>
                                  银行卡号:
                              </span>
                              <a :title="authCheckUserDetailVO.cardNo">
                                  {{authCheckUserDetailVO.cardNo || placeholder}}
                              </a>
                          </li> -->
                          <li>
                              <span>
                                  身份证地址:
                              </span>
                              <a :title="loanCheckUserDetailVO.address">
                                  {{loanCheckUserDetailVO.address || placeholder}}
                              </a>
                          </li>
                          <li>
                             <span>
                                 芝麻分:
                             </span>
                             <a :class="{red:loanCheckUserDetailVO.zhimaScore}" :title="loanCheckUserDetailVO.zhimaScore">
                                 {{loanCheckUserDetailVO.zhimaScore || placeholder}}
                             </a>
                         </li>
                          <!-- <li>
                              <span>
                                  开户行:
                              </span>
                              <a :title="authCheckUserDetailVO.bankName">
                                  {{authCheckUserDetailVO.bankName || placeholder}}
                              </a>
                          </li> -->
                      </ul>
                       <ul class="nav">
                          <li>
                              <span>
                                  申请IP:
                              </span>
                              <a :title="loanCheckUserDetailVO.ip">
                                  {{loanCheckUserDetailVO.ip || placeholder}}
                              </a>
                          </li>
                          <li>
                              <span>
                                  申请地址:
                              </span>
                              <a :title="loanCheckUserDetailVO.locate">
                                  {{loanCheckUserDetailVO.locate || placeholder}}
                              </a>
                          </li>
                      </ul>
                      <ul class="nav beee">
                          <!-- <li>
                              <span>
                                  银行卡认证姓名:
                              </span>
                              <a :title="authCheckUserDetailVO.userName" class="lasta">
                                  {{authCheckUserDetailVO.userName || placeholder}}
                              </a>
                          </li>
                          <li>
                              <span>
                                  银行卡预留手机号:
                              </span>
                              <a :title="authCheckUserDetailVO.phone" class="lasta">
                                  {{authCheckUserDetailVO.phone || placeholder}}
                              </a>
                          </li> -->
                          <li>
                              <span>
                                  单位名称:
                              </span>
                              <a :title="loanCheckUserDetailVO.companyName" class="lasta">
                                  {{loanCheckUserDetailVO.companyName || placeholder}}
                              </a>
                          </li>
                          <li>
                              <span>
                                  单位地址:
                              </span>
                              <a :title="loanCheckUserDetailVO.companyAddress" class="lasta">
                                  {{loanCheckUserDetailVO.companyAddress || placeholder}}
                              </a>
                          </li> 
                      </ul>
                      <!-- <div class="title title1">
                          照片信息
                      </div> 
                      <ul class="nav nav2">
                          <li class="img" @click='setCurrentImg(authCheckUserDetailVO.cardFront)'><img :src="authCheckUserDetailVO.cardFront"></li>
                          <li class="img" @click='setCurrentImg(authCheckUserDetailVO.cardBack)'><img :src="authCheckUserDetailVO.cardBack"></li>
                          <li class="img" @click='setCurrentImg(authCheckUserDetailVO.cardGroup)'><img :src="authCheckUserDetailVO.cardGroup"></li>
                      </ul>-->
                      <div class="title title1">
                          社会关系
                      </div> 
                      <ul class="nav beee">
                          <li>
                              <span>
                                  关系人姓名:
                              </span>
                              <a :title="loanCheckUserDetailVO.relationNameFirst">
                                  {{loanCheckUserDetailVO.relationNameFirst || placeholder}}
                              </a>
                          </li>
                          <li>
                              <span>
                                  与本人关系:
                              </span>
                              <a :title="loanCheckUserDetailVO.userRelationFirst">
                                  {{loanCheckUserDetailVO.userRelationFirst || placeholder}}
                              </a>
                              <span class="cuijcone">
                               <el-button type="text" @click="nameFirstFn">催记</el-button>
                             </span>
                          </li>
                      </ul>
                       <ul class="nav ">
                          <li>
                              <span>
                                  电话号码:
                              </span>
                              <a :title="loanCheckUserDetailVO.relationMobileFirst">
                                  {{loanCheckUserDetailVO.relationMobileFirst || placeholder}}
                              </a>
                          </li>
                      </ul>
                      <ul class="nav beee">
                          <li>
                              <span>
                                  关系人姓名:
                              </span>
                              <a :title="loanCheckUserDetailVO.relationNameSecond">
                                  {{loanCheckUserDetailVO.relationNameSecond || placeholder}}
                              </a>
                          </li>
                          <li>
                              <span>
                                  与本人关系:
                              </span>
                              <a :title="loanCheckUserDetailVO.userRelationSecond">
                                  {{loanCheckUserDetailVO.userRelationSecond || placeholder}}
                              </a>
                              <span class="cuijcone">
                               <el-button type="text" @click="nameSecondFn">催记</el-button>
                             </span>
                          </li>
                      </ul>
                       <ul class="nav ">
                          <li>
                              <span>
                                  电话号码:
                              </span>
                              <a :title="loanCheckUserDetailVO.relationMobileSecond">
                                  {{loanCheckUserDetailVO.relationMobileSecond || placeholder}}
                              </a>
                          </li>
                      </ul>
                      <div class="title title1">
                                银行卡信息
                            </div>
                            <ul class="nav beee">
                                <li>
                                    <span>
                                        银行卡号:
                                    </span>
                                    <a :title="loanCheckUserDetailVO.cardNo">
                                        {{loanCheckUserDetailVO.cardNo || placeholder}}
                                    </a>
                                </li>
                                <li>
                                    <span>
                                        开户行:
                                    </span>
                                    <a :title="loanCheckUserDetailVO.bankName">
                                        {{loanCheckUserDetailVO.bankName || placeholder}}
                                    </a>
                                </li>
                            </ul>
                            <ul class="nav">
                                <li>
                                    <span>
                                        银行卡认证姓名:
                                    </span>
                                    <a class="lasta lastb" :title="loanCheckUserDetailVO.userName" >
                                        {{loanCheckUserDetailVO.userName || placeholder}}
                                    </a>
                                </li>
                                <li>
                                    <span>
                                        银行卡预留手机号:
                                    </span>
                                    <a class=" lasta lastb" :title="loanCheckUserDetailVO.mobile"> 
                                        {{loanCheckUserDetailVO.mobile || placeholder}}
                                    </a>
                                </li>
                            </ul>
                      <div class="title title1">
                                照片信息
                      </div>
                      <ul class="nav nav2">
                          <li class="img" @click='setCurrentImg(loanCheckUserDetailVO.cardFront)'><img :src="loanCheckUserDetailVO.cardFront"></li>
                          <li class="img" @click='setCurrentImg(loanCheckUserDetailVO.cardBack)'><img :src="loanCheckUserDetailVO.cardBack"></li>
                          <li class="img" @click='setCurrentImg(loanCheckUserDetailVO.cardGroup)'><img :src="loanCheckUserDetailVO.cardGroup"></li>
                      </ul>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="通讯录" >
                     <loading v-show='loading_contact' ></loading>
                           <p class='no-data' v-show='!loading_contact&&!tableData.length'>暂无数据</p>
                            <div class="txl"  v-show='tableData.length'>
                                 <!--  <ul class="nav" >
                                <li>
                                    <span>
                                        总条数:
                                    </span>
                                    <span style="left:90px;">
                                        {{numTotal || placeholder}}
                                    </span>
                                    <span style="left:130px;">
                                        条
                                    </span>
                                </li>
                                <li>
                                   <span>
                                       通讯录:
                                   </span>
                                   <span style="left:90px;">
                                       {{nameTotal || placeholder}}
                                   </span>
                                   <span style="left:130px;">
                                       条
                                   </span>
                               </li>
                            </ul>
                    -->
                            <div class="table-list viewWidth">
                               <table>
                                   <thead class="table-list__head">
                                       <tr>
                                           <th>号码</th>
                                           <th>姓名</th>
                                           <th>主叫/被叫</th>
                                           <th></th>
                                           <!--<th>通话时长</th>
                                           <th>主叫次数</th>
                                           <th>主叫时长</th>
                                           <th>被叫次数/被叫时长</th> -->
                                       </tr>
                                   </thead>
                                   <tbody class='table-list__body have-border'>
                                       <tr v-for='item in tableData'>
                                           <td>{{ item.userPhone || placeholder }}</td>
                                           <td>{{ item.userName || placeholder }}</td>
                                           <td>{{ item.calledAndCalledCnt || placeholder }}</td>
                                           <td> <el-button type="primary" smart @click="reminderFn(item)">催记</el-button></td>
                                           <!-- <td>{{ item.talk_count || placeholder }}</td>
                                           <td>{{ item.talk_seconds | secondFormat }}</td>
                                           <td>{{ item.call_count || placeholder }}</td>
                                           <td>{{ item.call_seconds | secondFormat }}</td> -->
                                           <!-- <td>{{ item.called_count || placeholder }}</td> -->
                                           <!-- <td>{{item.called_count || placeholder}} / {{item.called_seconds | secondFormat }}</td> -->
                                       </tr>
                                    </tbody>
                               </table>
                          </div>
                    <el-pagination v-show="tableData.length" class="pan"  @size-change="handleSizeChangeRight" @current-change="handleCurrentChangeRight" :current-page="pageIndexright"  :page-size="10" layout="  prev, pager, next, jumper" :pager-count="5"
                             :total="totalright" :background="true">
                    </el-pagination>
                            </div>
                  </el-tab-pane>
                  <el-tab-pane label="运营商信息">
                     <loading v-show="isMsgs"></loading>
                       <div class="yysxx" v-show="!isMsgs">
                            <!--  <div class="red mrl10 fw600" v-show="authCheckUserDetailVO.callRecordRisk">
                                                        通话记录命中触发黑名单
                                                    </div> -->
                         <p class='no-data' v-show='loanCheckUserDetailVO==""'>暂无数据</p>
                          <div class="showid" v-show='loanCheckUserDetailVO!==""'>
                              <ul class="nav" >
                                  <li>
                                      <span>
                                          运营商报告:
                                      </span>
                                      <a class="alink" target="_self" :title="loanCheckUserDetailVO.reportUrl" :href="loanCheckUserDetailVO.reportUrl" style="width:100px;">
                                          {{ck || placeholder}}
                                      </a> 
                                  </li>
                              </ul>
                          </div>
                       </div>
                  </el-tab-pane>
                  <!-- 跟进记录 -->
                    <el-tab-pane label="跟进记录">
                     <loading v-if="isMsgsgjjl"></loading>
                        <div class="gjjl" v-else="!isMsgsgjjl">
                            <el-button type="primary" icon="el-icon-edit" round @click="editFn">新增跟进记录</el-button>
                            <el-table
                            :data="tableDataFollow"
                            stripe
                            style="width: 100%">
                            <el-table-column
                              prop="time"
                              label="跟进时间">
                            </el-table-column>
                            <el-table-column
                              prop="calledPerson"
                              label="被呼叫人">
                            </el-table-column>
                            <el-table-column
                              prop="followWay"
                              label="呼叫号码">
                            </el-table-column>
                            <el-table-column
                              prop="followPerson"
                              label="跟进人">
                            </el-table-column>
                            <el-table-column
                              prop="info"
                              label="跟进内容">
                            </el-table-column>
                          </el-table>
                          <el-pagination v-show="tableDataFollow.length" class="pan"  @current-change="handleCurrentChangeRightlast" :current-page="pageIndexrightlast"  :page-size="10" layout="prev, pager, next, jumper" :pager-count="5"
                             :total="Followtotal" :background="true">
                    </el-pagination>
                        </div>
                  </el-tab-pane>
                </el-tabs>
            </div>
        </el-card>
        <!-- 图片处理 -->
         <image-view
            v-if='currentImg'
            :show='show_modal_img' 
            :url='currentImg'
            @close='show_modal_img = false'>
        </image-view>
       <!-- 新增跟进记录  show_modal_edit-->
       <modal-edit  
            :show='show_modal_edit' 
            title='新增跟进记录'
            :width="'615px'"
            :loading='loading_edit'
            @confirm='editHandle'
            @close='editClose'>
            <div class="w421">
              <span class="mr24">跟进时间</span>
               <el-date-picker
               class="alwinp"
               @change="timechange"
                v-model="editValue"
                type="datetime"
                value-format="yyyy/MM/dd HH:hh:mm"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div class="w421">
              <span class="mr24">被呼叫人</span>
              <el-input
                class="alwinp"
                placeholder="请输入姓名"
                v-model="calledName"
                clearable>
              </el-input>
            </div>
            <div class="w421">
             <span class="mr24">呼叫号码</span>
             <el-input
               class="alwinp"
               placeholder="请输入呼叫号码"
               v-model="followphone"
               clearable>
             </el-input>
           </div>
            <div class="w421copy">
              <span class="mr24">跟进内容</span>
              <textarea class='modal__textarea' rows="5" placeholder="请输入跟进内容" v-model='followTextarea'></textarea>
            </div>
           <!--  <div class="editdiv">
             
           </div> -->
        </modal-edit>

        <!-- 增加催记列  show_reminder_edit-->
       <modal-edit  
            :show='show_reminder_edit' 
            title='新增催记'
            :width="'615px'"
            :loading='loading_reminder'
            @confirm='reminderHandle'
            @close='reminderClose'>
            <div class="w421">
              <span class="mr24">跟进时间</span>
               <el-date-picker
               class="alwinp"
               @change="reminderchange"
                v-model="reminderValue"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div class="w421">
              <span class="mr24">被呼叫人</span>
              <el-input
                class="alwinp"
                placeholder="请输入姓名"
                v-model="reminderName"
                clearable>
              </el-input>
            </div>
            <div class="w421">
             <span class="mr24">呼叫号码</span>
             <el-input
               class="alwinp"
               placeholder="请输入呼叫号码"
               v-model="reminderphone"
               clearable>
             </el-input>
           </div>
            <div class="w421copy">
              <span class="mr24">跟进内容</span>
              <textarea class='modal__textarea' rows="5" placeholder="请输入跟进内容" v-model='reminderTextarea'></textarea>
            </div>
           <!--  <div class="editdiv">
             
           </div> -->
        </modal-edit>
        <!-- 本人催记 -->
        <modal-edit  
            :show='show_reminder_edit_oneself' 
            title='新增催记'
            :width="'615px'"
            :loading='loading_reminder_oneself'
            @confirm='reminderHandleOneself'
            @close='reminderCloseOneself'>
            <div class="w421">
              <span class="mr24">跟进时间</span>
               <el-date-picker
               class="alwinp"
               @change="reminderchangeOneself"
                v-model="reminderValueOneself"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div class="w421">
              <span class="mr24">被呼叫人</span>
              <el-input
                class="alwinp"
                placeholder="请输入姓名"
                v-model="reminderNameOneself"
                clearable>
              </el-input>
            </div>
            <div class="w421">
             <span class="mr24">呼叫号码</span>
             <el-input
               class="alwinp"
               placeholder="请输入呼叫号码"
               v-model="reminderphoneOneself"
               clearable>
             </el-input>
           </div>
            <div class="w421copy">
              <span class="mr24">跟进内容</span>
              <textarea class='modal__textarea' rows="5" placeholder="请输入跟进内容" v-model='reminderTextareaOneself'></textarea>
            </div>
           <!--  <div class="editdiv">
             
           </div> -->
        </modal-edit>
        <!-- 社会关系 1 催记 -->
        <modal-edit  
            :show='show_reminder_edit_NameFirst' 
            title='新增催记'
            :width="'615px'"
            :loading='loading_reminder_NameFirst'
            @confirm='reminderHandleNameFirstf'
            @close='reminderCloseNameFirst'>
            <div class="w421">
              <span class="mr24">跟进时间</span>
               <el-date-picker
               class="alwinp"
               @change="reminderchangeNameFirst"
                v-model="reminderValueNameFirst"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div class="w421">
              <span class="mr24">被呼叫人</span>
              <el-input
                class="alwinp"
                placeholder="请输入姓名"
                v-model="reminderNameNameFirst"
                clearable>
              </el-input>
            </div>
            <div class="w421">
             <span class="mr24">呼叫号码</span>
             <el-input
               class="alwinp"
               placeholder="请输入呼叫号码"
               v-model="reminderphoneNameFirst"
               clearable>
             </el-input>
           </div>
            <div class="w421copy">
              <span class="mr24">跟进内容</span>
              <textarea class='modal__textarea' rows="5" placeholder="请输入跟进内容" v-model='reminderTextareaNameFirst'></textarea>
            </div>
           <!--  <div class="editdiv">
             
           </div> -->
        </modal-edit>
        <!-- 社会关系 2 催记 -->
        <modal-edit  
            :show='show_reminder_edit_NameSecond' 
            title='新增催记'
            :width="'615px'"
            :loading='loading_reminder_NameSecond'
            @confirm='reminderHandleNameSecond'
            @close='reminderCloseNameSecond'>
            <div class="w421">
              <span class="mr24">跟进时间</span>
               <el-date-picker
               class="alwinp"
               @change="reminderchangeNameSecond"
                v-model="reminderValueNameSecond"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div class="w421">
              <span class="mr24">被呼叫人</span>
              <el-input
                class="alwinp"
                placeholder="请输入姓名"
                v-model="reminderNameNameSecond"
                clearable>
              </el-input>
            </div>
            <div class="w421">
             <span class="mr24">呼叫号码</span>
             <el-input
               class="alwinp"
               placeholder="请输入呼叫号码"
               v-model="reminderphoneNameSecond"
               clearable>
             </el-input>
           </div>
            <div class="w421copy">
              <span class="mr24">跟进内容</span>
              <textarea class='modal__textarea' rows="5" placeholder="请输入跟进内容" v-model='reminderTextareaNameSecond'></textarea>
            </div>
           <!--  <div class="editdiv">
             
           </div> -->
        </modal-edit>
    </div>
</template>
<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import popover from '../components/popover.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    //import modalEdit from '../components/ModalEdit.vue'
    import confirm from '../components/Confirm.vue'
    import imageView from '../components/ImageView.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { loanApi, authApi, allApi, lenderApi, repayApi  } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            footerBar,  
            selectGroup,
            selectOption,
            radioGroup,
            tabBox,
            tab,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            imageView,
            datePicker,
            popover,
            modalEdit:resolve => {require(['../components/ModalEdit.vue'],resolve)}
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else if(boolean === false){
                    return '否'
                }else{
                    return '--'
                }
            }
        },
        data() {
            return {
                options: [{
                  value: '1',
                  label: '姓名'
                }, {
                  value: '2',
                  label: '手机号'
                }],
                options1:[
                {
                  value1: null,
                  label: '所有'
                },{
                  value1: '1',
                  label: '失联'
                }
                ,{
                  value1: '2',
                  label: '疑难'
                },{
                  value1: '3',
                  label: '承诺'
                },{
                  value1: '4',
                  label: '跳票'
                },{
                  value1: '5',
                  label: '代偿'
                },{
                  value1: '6',
                  label: '转告'
                },{
                  value1: '7',
                  label: '无诚意还款'
                },{
                  value1: '8',
                  label: '疑似欺诈'
                }
                ],
                followphone:"",
                reminderValue:new Date(),
                reminderName:"",
                reminderphone:"",
                reminderTextarea:"",
                show_reminder_edit:false,
                loading_edit:false,
                loading_reminder:false,
                calledName:"",
                editValue:"",
                followName:"",
                followTextarea:"",
                value1:null,
                value2:null,
                value:"1",
                input4:"",
                input5:"",
                input6:"",
                input7:"",
                input8:"",
                input9:"",
                input10:"",
                currentPage4:1,
                pageSize:10,
                pageIndex:1,
                pageIndexright:1,
                totalright:0,
                type:0,
                phone:"",
                loading:false,
                records:[],
                isUpload:0,
                id:null,
                info:{},
                placeholder:"--",
                show_modal_img:false,
                currentImg:"",
                sessionId:"",
                total:0,
                show_confirm_pass:false,
                loading_pass:false,
                show_modal_reject:false,
                loading_reject:false,
                rejectReason:"",
                tableData: [],
                basicStatus:"",
                idCardStatus:'',
                mobileStatus:'',
                contactStatus:'',
                clicksuspicious:"",
                time:null,
                msgTime:null,
                usernamesss:"",
                searchTime:null,
                isRecords:false,
                submitTime:"",
                statusStr:"",
                value4:"",
                isTrue:false,
                startTime:"",
                endTime:"",
                loanCheckUserDetailVO:{},
                isgoAuthDetail:false,
                isMsg:false,
                isMsgs:false,
                isMsgsgjjl:false,
                isPopover:false,
                timeId:null,
                empty:"111",
                ck:"查看",
                nameTotal:"",
                loading_contact:false,
                contant:false,
                popshow:false,
                floatL:"floatL",
                staArr:[],
                suspicious:"逾期",
                isClicktrue:false,
                emitConfirmb:false,
                tableDataFollow:[],
                show_modal_edit:false,
                queryAll:"",
                LoanCheckUserDetailVO:[],
                staArrcopy:[],
                Followtotal:0,
                pageIndexrightlast:1,
                pickerOptions: {
                  disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                  },
                  firstDayOfWeek: 1
                },
                recordsNull:false,
                isActive:false,
                show_reminder_edit_oneself:false,
                loading_reminder_oneself:false,
                reminderValueOneself:"",
                reminderNameOneself:"",
                reminderphoneOneself:"",
                reminderTextareaOneself:"",
                show_reminder_edit_NameFirst:false,
                loading_reminder_NameFirst:false,
                reminderValueNameFirst:"",
                reminderNameNameFirst:"",
                reminderphoneNameFirst:"",
                reminderTextareaNameFirst:"",
                show_reminder_edit_NameSecond:false,
                loading_reminder_NameSecond:false,
                reminderValueNameSecond:"",
                reminderNameNameSecond:"",
                reminderphoneNameSecond:"",
                reminderTextareaNameSecond:"",
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            basicInfo(){
                return this.info.report && this.info.report.basicInfo || {}
            },
            idCardInfo(){
                return this.info.report && this.info.report.idCardInfo || {}
            },
             deviceConfig(){
                return this.info.report && this.info.report.deviceConfig || {}
            },
            cardInfo(){
                return this.info.report && this.info.report.cardInfo || {}
            },
            mobileInfo(){
                return this.info.report && this.info.report.mobileInfo || {}
            },
            zhimaScore(){
                return this.info.report && this.info.report.zhimaScore || ""
            },
            
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            reset(){
                this.input4=""
                this.input5=""
                this.input6=""
                this.input7=""
                this.input8=""
                this.input9=""
                this.input10=""
                this.value1=null

            },
            //社会关系2 弹窗show
            nameSecondFn(){
                this.show_reminder_edit_NameSecond=true
                if(!this.loanCheckUserDetailVO){
                    this.loanCheckUserDetailVO={}
                }
                this.reminderNameNameSecond=this.loanCheckUserDetailVO.relationNameSecond
                this.reminderphoneNameSecond=this.loanCheckUserDetailVO.relationMobileSecond
                this.reminderValueNameSecond=new Date()
                this.reminderTextareaNameSecond=""
            },
            //社会关系 2 关闭函数
            reminderCloseNameSecond(){
                this.show_reminder_edit_NameSecond=false
            },
            //社会关系 2 提交函数
            reminderHandleNameSecond(){
                this.show_reminder_edit_NameSecond=false
                 let msg={
                id:this.id,
                info:this.reminderTextareaNameSecond,
                followMobile:this.reminderphoneNameSecond,
                operatorTime:this.reminderValueNameSecond,
                calledPerson:this.reminderNameNameSecond
              }
                repayApi.repayAddContactFollow(msg)
                .then(result=>{
                    this.show_reminder_edit_NameSecond=false;
                    this.getFollowRecordList();
                })
                .catch(error => {
                    console.error(error)
                })
            },
            //社会关系 2 时间格式函数
            reminderchangeNameSecond(val){
                if(val){
                  this.reminderValueNameSecond=val;
              }else{
                  this.reminderValueNameSecond="";
              }
            },
            //社会关系1 弹窗show
            nameFirstFn(){
                this.show_reminder_edit_NameFirst=true
                this.reminderValueNameFirst=new Date()
                this.reminderTextareaNameFirst=""
                if(!this.loanCheckUserDetailVO){
                    this.loanCheckUserDetailVO={}
                }
                this.reminderNameNameFirst=this.loanCheckUserDetailVO.relationNameFirst
                this.reminderphoneNameFirst=this.loanCheckUserDetailVO.relationMobileFirst

            },
            //社会关系1 提交函数
            reminderHandleNameFirstf(){
                this.show_reminder_edit_NameFirst=false
                let msg={
                id:this.id,
                info:this.reminderTextareaNameFirst,
                followMobile:this.reminderphoneNameFirst,
                operatorTime:this.reminderValueNameFirst,
                calledPerson:this.reminderNameNameFirst
              }
                repayApi.repayAddContactFollow(msg)
                .then(result=>{
                    this.show_reminder_edit_NameFirst=false;
                    this.getFollowRecordList();
                })
                .catch(error => {
                    console.error(error)
                })
            },
            //社会关系1 取消函数
            reminderCloseNameFirst(){
                this.show_reminder_edit_NameFirst=false
               
            },
            //社会关系1 时间格式函数
            reminderchangeNameFirst(val){
                if(val){
                  this.reminderValueNameFirst=val;
              }else{
                  this.reminderValueNameFirst="";
              }
            },
            //本人催记弹窗取消函数
            reminderCloseOneself(){
              this.show_reminder_edit_oneself=false;
            },
            //本人催记弹窗函数
            oneSelfFn(){
                this.show_reminder_edit_oneself=true;
                this.reminderValueOneself=new Date()
                this.reminderTextareaOneself=""
                if(!this.loanCheckUserDetailVO){
                    this.loanCheckUserDetailVO={}
                }
                this.reminderNameOneself=this.loanCheckUserDetailVO.name
                this.reminderphoneOneself=this.loanCheckUserDetailVO.phone
            },
            //本人催记提交函数
            reminderHandleOneself(){
                this.show_reminder_edit_oneself=false;
                let msg={
                id:this.id,
                info:this.reminderTextareaOneself,
                followMobile:this.reminderphoneOneself,
                operatorTime:this.reminderValueOneself,
                calledPerson:this.reminderNameOneself
              }
                repayApi.repayAddContactFollow(msg)
                .then(result=>{
                    this.show_reminder_edit_oneself=false;
                    this.getFollowRecordList();
                })
                .catch(error => {
                    console.error(error)
                })
            },
            //本人催记时间选择
            reminderchangeOneself(val){
              console.log(val)
                if(val){
                  this.reminderValueOneself=val;
              }else{
                  this.reminderValueOneself="";
              }
            },
            /**
             * [reminderHandle 新增催记]
             * @Author   lzh
             * @DateTime 2018-07-17T10:29:45+0800
             * @return   {[type]}                 [description]
             */
            reminderHandle(){
              let msg={
                id:this.id,
                info:this.reminderTextarea,
                followMobile:this.reminderphone,
                operatorTime:moment(this.reminderValue).format("YYYY-MM-DD"),
                calledPerson:this.reminderName
              }
                repayApi.repayAddContactFollow(msg)
                .then(result=>{
                    this.show_reminder_edit=false;
                    this.getFollowRecordList();
                })
                .catch(error => {
                    console.error(error)
                })
            },
            /*
              新增记录弹窗函数
              @params  show_modal_edit 控制弹窗显示隐藏
                       editValue       跟进时间
                       calledName      被呼叫人
                       followName      跟进人
                       followTextarea  跟进内容
            */
            editFn(){
                this.show_modal_edit = true
                //清空
                this.editValue=""
                this.calledName=""
                this.followName=""
                this.followTextarea=""
                this.followphone=""
            },
            reminderFn(item){
              console.log(item)
                this.show_reminder_edit = true
                //清空
                this.reminderValue=new Date()
                this.reminderName=item.contactName
                this.reminderTextarea=""
                this.reminderphone=item.mobile
            },
            /*
              新增记录弹窗函数
              @params  show_modal_edit 控制弹窗显示隐藏
                       editValue       跟进时间
                       calledName      被呼叫人
                       followName      跟进人
                       followTextarea  跟进内容
                       editObj         弹窗内容存储对象
                       tableDataFollow 跟进记录展示数组
                       editHandle函数 确认--unshift在添加跟进数组的最前面添加
            */
            editHandle(){
                this.show_modal_edit = false;
                let msg={
                    id:this.id,
                    operatorTime:this.editValue,
                    calledPerson:this.calledName,
                    followPerson:this.usernamesss,
                    info:this.followTextarea,
                    followMobile:this.followphone,
                }
                 repayApi.addFollowNew(msg)
                  .then(result=>{
                      this.getFollowRecordList()
                  })
                  .catch(error => {
                      console.error(error)
                  })
            },
            /*
              新增记录弹窗函数
              @params  show_modal_edit 控制弹窗显示隐藏
            */
            editClose(){
                this.show_modal_edit = false;
            },
            reminderClose(){
                this.show_reminder_edit = false;
                this.reminderValue=""
            },
            /*
              欺诈用户弹窗函数
              @params isClicktrue 控制弹窗显示隐藏
                      staArr弹窗数据存储函数
                      isopen控制选择元素是否高亮
                      item 当前项
                      index当前项的index
                      suspicious默认显示项
                      forEach遍历数组不等于当前项状态则全部设置为false
            */
            clickActive(item,e,index){
              
              this.isClicktrue=true;
               this.staArr.forEach(i => {
                  if(i.isopen !== this.staArr[index].isopen) {
                      i.isopen = false;
                  };
                });
               console.log(this.staArr)
               console.log(item)
              this.clicksuspicious=item.lableName
             item.isopen = !item.isopen;
            },
            /*
              欺诈用户弹窗显示隐藏函数
              @params popshow 控制弹窗显示隐藏
            */
            isClick(){
              this.popshow=!this.popshow
              this.staArr=this.staArr;
            },
            /*
              欺诈用户弹窗确认函数
              @params isClicktrue 判断用户是否是否选中欺诈状态，如果选中则赋值默认值suspicious
            */
            emitConfirm(){
                if(this.isClicktrue){
                  this.suspicious=this.clicksuspicious
                  let msg={
                    id:this.id,
                    lableName:this.suspicious,
                  }
                  repayApi.addFollowLable(msg)
                  .then(result=>{
                      this.getFollowRecordList()
                  })
                  .catch(error => {
                      console.error(error)
                  })
                }
                this.popshow=false;
            },
            /*
              欺诈用户弹窗取消函数
              @params popshow 控制弹窗显示隐藏
            */
            emitClose(){
              this.popshow=false;
            },
            //时间选择
            timechange(val){
              if(val){
                  this.editValue=val;
              }else{
                  this.editValue="";
              }
            },
            //新增催记时间选择
            reminderchange(val){
              console.log(val)
                if(val){
                  this.reminderValue=val;
              }else{
                  this.reminderValue="";
              }
            },
            //高级搜索显示隐藏
            isSearch(){
                if(this.isTrue){
                    this.isTrue=false;
                }else{
                  this.isTrue=true;
                }
            },
            //tabs
            tabClick(item){
                console.log(item.label)
                if(this.isRecords){
                    if(item.label=="通讯录"){
                    this.getContact()
                  }
                }
            },
            /*
              接口说明:跟进记录接口
              @params id  this.id
            */
            getFollowRecordList(){
                let msg={
                  id:this.id,
                  pageIndex:this.pageIndexrightlast,
                }
                repayApi.getFollowRecordList(msg)
                .then(result=>{
                    console.log(result.page)
                    this.tableDataFollow=result.page.list
                    for(var j = 0; j<this.tableDataFollow.length; j++){
                          if(this.tableDataFollow[j].info == undefined || this.tableDataFollow[j].info == ""){
                              this.tableDataFollow[j].info="--"
                          }
                          if(this.tableDataFollow[j].time == undefined || this.tableDataFollow[j].time == ""){
                              this.tableDataFollow[j].time="--"
                          }
                          if(this.tableDataFollow[j].followWay == undefined || this.tableDataFollow[j].followWay == ""){
                              this.tableDataFollow[j].followWay="--"
                          }
                          if(this.tableDataFollow[j].calledPerson == undefined || this.tableDataFollow[j].calledPerson == ""){
                              this.tableDataFollow[j].calledPerson="--"
                          }
                      }
                    this.Followtotal=result.page.totalRow
                })
                .catch(error => {
                    console.error(error)
                })
            },
            handleCurrentChangeRightlast(val){
                console.log(`当前页: ${val}`);
                this.pageIndexrightlast=val;
                this.getFollowRecordList()
            },
            //认证申请通讯录
            getContact(){
                this.contant=false;
                this.tableData=[];
                this.nameTotal=""
                this.numTotal=""
                this.loading_contact = true
                repayApi.getContact({
                    sessionId:this.sessionId,
                    id:this.id,
                    pageSize:10,
                    pageIndex:this.pageIndexright,
                })
                .then(result=>{
                  console.log(result)
                  this.loading_contact = false
                  //this.msgTime=new Date().getTime() 
                  if(result.records=="" || !result.records){
                    return 
                      /*this.contant=true;
                      this.tableData =result.records
                      this.nameTotal="--"
                      this.numTotal="--"
                      this.totalright=0*/
                  }else{
                    this.numTotal=result.totalCount;
                    this.nameTotal=result.records[0].mobileCount
                    this.tableData = result.records;
                    this.totalright=result.totalCount
                  }
                    
                    
                })
                .catch(error => {
                    console.error(error)
                    this.loading_contact = false
                })
            },
           selectChange(){
              console.log(this.value1)
              for(var l = 0; l<this.options1.length;l++){
                  if(this.value1==this.options1[l].value1){
                      this.value1=this.options1[l].label
                  }
              }
           },
            keyupFn(value){
                clearTimeout(this.timeId)
                this.timeId=setTimeout(()=>{
                        this.initList()
                },800)
            },
            //搜索
            search(){
                if(this.searchTime){
                    if((new Date().getTime())-this.searchTime>200){
                        this.pageIndex=1;
                        if(this.isPopover){
                            this.isPopover=false;
                        }else{
                          this.isPopover=true;
                        }
                        this.initList()
                        //this.reset()
                    }
                }
                
            },
            /*
              接口说明： 贷后标签列表
            */
            followLableList(){
                repayApi.followLableList()
                .then(result=>{
                    console.log(result)
                    this.staArr=result
                    for(var j = 0; j<this.staArr.length; j++){
                        this.$set(this.staArr[j],"isopen",false)
                    }
                    this.$set(this.staArr[0],"isopen",false)
                })
                .catch(error => {
                    console.error(error)
                    
                })
            },
            //详情展示
            goAuthDetail(row){
              this.id=row.id
                if(this.msgTime){
                    if((new Date().getTime())-this.msgTime>200){
                        this.loanCheckUserDetailVO=""
                        this.msgTime=new Date().getTime();
                        for(var i = 0;i<this.records.length;i++){
                          this.records[i].active=false
                        }
                        row.active=true
                         let msg={
                          id:this.id,
                        }
                        this.isMsg=true;
                        this.isMsgs=true;
                        this.isMsgsgjjl=true
                        this.getFollowRecordList()
                        this.getContact()
                        repayApi.detailNew(msg)
                        .then(result=>{
                          console.log(result)
                            this.isMsg=false;
                            this.isMsgs=false;
                            this.isMsgsgjjl=false
                            this.commonfn()
                            this.suspicious=result.followStatus
                            this.loanCheckUserDetailVO=result
                            //触发风控规则
                            this.controlRisk=result.controlRisk
                        })
                        .catch(error => {
                            console.error(error)
                            this.isMsg=false;
                            this.isMsgs=false;
                        })
                        
                    }
                }
            },
            //左边分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageIndex=val;
                this.initList()
            },
            //右边分页
            handleSizeChangeRight(){
                console.log(`当前页: ${val}`);
            },
             handleCurrentChangeRight(val) {
                console.log(`当前页: ${val}`);
                this.pageIndexright=val;
                this.getContact()
            },
            //return false
            returnFn(item){
              console.log(item)
               
                if(item==""){
                  return false;
                }else if(item ==undefined){
                 return false; 
                }else{
                  return true;
                }
            },
            returnFn(){
                this.startTime=""
                this.endTime=""
                this.value1=""
                this.value2=""
            },
            //搜索列表的接口
            initList(){
                let message=""
                let msg={
                    pageSize:this.pageSize,
                    pageIndex:this.pageIndex,
                    userName:this.phone,
                    emergencyName:this.input4,
                    emergencyPhone:this.input7,
                    contentName:this.input5,
                    contentPhone:this.input8,
                    idCard:this.input6,
                    followDays:this.input9,
                    overdueDays:this.input10,
                    lableName:this.value1,
                    queryAll:this.queryAll,
                }
                let msg1={
                    pageSize:this.pageSize,
                    pageIndex:this.pageIndex,
                    phone:this.phone,
                    emergencyName:this.input4,
                    emergencyPhone:this.input7,
                    contentName:this.input5,
                    contentPhone:this.input8,
                    idCard:this.input6,
                    followDays:this.input9,
                    overdueDays:this.input10,
                    lableName:this.value1,
                    queryAll:this.queryAll,
                }
                if(this.value==1){
                     message=msg
                }else if(this.value==2){
                     message=msg1
                }
                this.isgoAuthDetail=true
                this.isMsg=true
                this.isMsgs=true
                this.isMsgsgjjl=true
                repayApi.waitFollowList(message)
                .then(result=>{
                     
                      this.isMsg=false
                      this.isgoAuthDetail=false
                      this.isMsgs=false
                      this.isMsgsgjjl=false
                      this.searchTime=new Date().getTime()
                      this.loanCheckUserDetailVO=result.LoanCheckUserDetailVO
                      this.records=result.page.list;
                       console.log(this.records)
                       for(var i = 0;i<this.records.length;i++){
                          this.records[i].active=false
                       }
                      this.total=result.page.totalRow;
                      this.commonfn()
                      
                      this.msgTime=new Date().getTime()
                      if(this.records!=""){
                          this.id=this.records[0].id;
                          this.getContact()
                          this.getFollowRecordList();
                          this.recordsNull=false
                      }else{
                          this.recordsNull=true
                      }
                })
                .catch(error => {
                    console.error(error)
                    this.isgoAuthDetail=false
                    this.isMsg=false
                    this.isMsgs=false
                })
               
            },
            commonfn(){
                if(!this.loanCheckUserDetailVO){
                          this.loanCheckUserDetailVO = {}
                      }
                      if(!this.loanCheckUserDetailVO.followStatus){
                        this.suspicious="逾期"
                      }else{

                      this.suspicious=this.loanCheckUserDetailVO.followStatus
                      }
                      if(!this.loanCheckUserDetailVO.repayAmount || this.loanCheckUserDetailVO.repayAmount==undefined){
                          this.loanCheckUserDetailVO.repayAmount="--"
                      }
                      if(!this.loanCheckUserDetailVO.applyAmount || this.loanCheckUserDetailVO.repayAmount==undefined){
                          this.loanCheckUserDetailVO.applyAmount="--"
                      }
                      if(!this.loanCheckUserDetailVO.serviceCharge || this.loanCheckUserDetailVO.repayAmount==undefined){
                          this.loanCheckUserDetailVO.serviceCharge="--"
                      }
                      if(!this.loanCheckUserDetailVO.oveAmount || this.loanCheckUserDetailVO.repayAmount==undefined){
                          this.loanCheckUserDetailVO.oveAmount="--"
                      }
            },
            setCurrentImg(img){
                this.currentImg = img
                this.show_modal_img = true
            },
            init(){
              if(localStorage.getItem("admin")=="admin"){
                    this.all=true;
              }
              this.queryAll = false;
              if(this.all){
                    this.queryAll = true
              }
              this.initList();
            },
            
        },
        updated(){
          var _this=this;
          if(_this.popshow){
               var oBtn=document.getElementById("ppclass");
              document.onclick=function(event){
               
                 var e=event || window.event;//兼容ie和非ie的event
                 var aim=e.srcElement || e.target; //兼容ie和非ie的事件源
                 //
                 if(e.srcElement){
                  var aim=e.srcElement;
                   if(aim!=oBtn){
                      _this.emitClose()
                   }
                 }else{
                   var aim=e.target;
                   if(aim!=oBtn){
                      _this.emitClose()
                   }
                 }
              }   
          }else{
              var oBtn=document.getElementById("ppclass");
              document.onclick=function(event){
               
                 var e=event || window.event;//兼容ie和非ie的event
                 var aim=e.srcElement || e.target; //兼容ie和非ie的事件源
                 //
                 if(e.srcElement){
                  var aim=e.srcElement;
                   if(aim==oBtn){
                      _this.emitClose()
                   }
                 }else{
                   var aim=e.target;
                   if(aim==oBtn){
                      _this.emitClose()
                   }
                 }
              }   
          }
        },
        mounted(){
        },
        created(){
            this.init()
            this.followLableList();
            
            this.usernamesss=localStorage.getItem("51SjdAdmin_userinfo")
          //this.suspicious=this.staArr[0].txt;
          this.sessionId=localStorage.getItem("51SjdAdmin_sessionId")
        },
        
    }
</script>
<style>
    .tab .cell{
        color:#333;
    }
    .tab .el-table thead{
        color:#333;
    }
    .nav5 .el-date-editor--daterange.el-input__inner{
      width: 390px!important;
    }
    .box-card-left .el-table::before{
        height: 0;
    }
    .gjjl .el-button{
      padding: 0;
      width:152px;
      height:44px;
      border-radius:8px;
      margin-left: 30px;
      margin-bottom: 20px;
    }
    #after-loan-wait .viewWidth .el-button{
        height: 30px;
        line-height: 30px;
        width: 60px;
        font-size: 14px;
       padding: 0;
    }
    #after-loan-wait .nav li .el-button
    {
      line-height: 0;
      padding: 0;
    }
    /* #after-loan-wait .viewWidth .el-button span{
      float: left;
    } */
</style>
<style lang="scss" scoped>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .activeClass{
      color:red;
    }
    .activess{
       background-color: rgba(64,158,255,.15) ;
    }
    .editdiv{
      height:50px;
      margin-top:20px;
    }
    .alwinp,.modal__textarea{
      width:307px;
      float: left;
    }
    .cuijc{
      margin-left: 10px;
      line-height:36px;
    }
    .modal__textarea{
      height:90px;
      border:1px solid #CECECE;
      border-radius:8px;
      text-indent: 20px;
      padding-top:10px;
    }
    .mr24{
      margin-right:20px;
      width:91px;
      height:45px;
      line-height:45px;
      float: left;
    }
    .w421copy{
      width:421px;
      margin-left:68px;
      margin-top: 20px;
      color:#333;
      height:100px;
    }
    .w421{
      width:421px;
      height:45px;
      margin-left:68px;
      margin-top: 20px;
      color:#333;
    }
    .cuijcone{
      position: absolute;
      left:212px;
    }
    .gjjl{
      margin-top:20px;
    }
    .nav5 li{
      width:100%;
      height:44px;
    }
    .w320{
        float: left;
        width:320px;
        margin-left:20px;
    }
    .nm{
        width: 115px;
        float: left;
        height:44px;
        line-height: 44px;
    }
    .elinp{
      //float: left;
      width:194px;
      height:44px;
    }
    .tabdiv{
      width: 98%;
    // height:800px;
      overflow-y:scroll; 
      margin:20px auto 0;
      font-size: 16px;
    }
    .fl{
      float: left;
      margin-left: 10px;
    }
    .fr{
      float: right;
      margin-right: 10px;
    }
    .tabnav{
      height:80px;
      width:100%;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
      border-bottom:1px solid #E1E1E1;
      li:nth-child(1){
        height: 48px;
        line-height: 42px;
      }
    }
    .po-re{
      position: relative;
    }
    .popdiv{
      width: 100%;
      height:87px;
      overflow-y:scroll; 
    }
    .active{
      //width:49px;
      height:20px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
      border-radius:8px;
      border:1px solid #5B5BF4;
      float: left;
      cursor: pointer;
      margin-bottom:10px;
      font-size:14px;
      line-height:20px;
      text-align: center;
      color:rgba(91,91,244,1);
    }
    .noactive{
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
      float: left;
      cursor: pointer;
      margin-bottom:10px;
      //width:49px;
      height:20px;
      border-radius:8px;
      border:1px solid #999;
      font-size:14px;
      line-height:20px;
      text-align: center;
      color:#999;
    }
    .floatL{
      float: left;
      cursor: pointer;
    }
    .mar{
      margin-right:10px;
    }
    .clicksp{
      font-size: 16px;
      color:#5B5BF4;
      cursor: pointer;
      float: left;
      clear: both;
    }
    .clicksp1{
        margin-top:8px;
        color:#FF0000;
        max-width:120px;
        white-space: nowrap; 
        overflow: hidden; 
        /*文字超出用省略号*/  
        text-overflow:ellipsis;
    }
    .searIpt{
      box-sizing:border-box;
      color:#606266;
      outline: none;
      border:1px solid #dcdfe6;
      width:150px;
      height:44px;
      margin-left:10px;
      text-indent: 20px;
    }
    .searIpt:focus{
      border:1px solid #409eff;
    }
    .btn3{
        width:96px;
        height:44px;
        line-height:18px;
        text-align: center;
        font-size: 16px;
        padding:0;
        margin-left:10px;
    }
    .nav-mt{
      margin-top:40px;
    }
    .btn1{
      width:140px;
      height:44px;
      padding:0;
      line-height:44px;
      font-size: 16px;
    }
    .search{
      padding:30px 0px 0px 30px;
      position: absolute;
      top:130px;
      left:10px;
      z-index:1000;
      width:676px;
      height:186px;
      background:#fff;
      border:1px solid #e4e7ed;
      box-shadow:0 2px 12px 0 rgba(0,0,0,.1);
      -webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);
    }
    .alink:hover{
      color:#3399ff;
    }
    .Danger{
        margin-top:8px; 
    }
     #auth-apply-wait{
        font-weight:normal;
    }
    .tab .cell{
        color:#333;
    }
    .cardBlack{
        color:red;
        margin-bottom:-22px;
        font-weight:600;
        padding-left:14px;
    }
    .pan{
        margin-top:20px;
    }
    .img{
        overflow:hidden;
        display: block;
        width: 30%;
        flex:1;
        position: relative;
        padding-top:25%;
        background-color: $sectionColor;
        img{
            width: 100%;
            height:132px;
            position: absolute;
            top:0;
            left:0;
        }
    }
    .nav{
        display:flex;
        min-height:36px;
        width:100%;
    }
    .beee{
        background:#eee;
    }
    .nav li{
        width: 342px;
        float:left;
        min-height:36px;
        position: relative;
        text-align:left;
        line-height:36px;
        width:46%;
        padding-left:20px;
        span{
            margin-right:10px;
            float: left;
            height: 100%;
        }
    }
    .nav li span,a{
      //position: absolute;
      //overflow: hidden;
      //width: 150px;
    }
    .nav li a{
      //width: 100px;
      left:150px;
      cursor: pointer;
      //white-space: nowrap;  
      /*文字超出用省略号*/  
      //text-overflow:ellipsis;  
    }
    .nav .sminw{
        left:150px;
    }
    .nav .sminw1{
        left:138px;
    }
    .title{
        margin:40px 0 20px 15px;
        font-weight:600;
    }
    .bcr-content{
        width:98%;
        min-height:400px;
        margin:0 auto;
    }
    .Danger{
        background:#F56C6C;
        border-radius:50%;
    }
    .Success{
        background:#67C23A;
        border-radius:50%;
    }
    .wh{
        display:block;
        width:28px;
        height:28px;
        text-align:center;
        line-height:28px;
        font-size:16px;
        color:#fff;
        cursor: pointer;
    }
    .mrt10{
        margin-top:10px;
    }
    .mrt20{
      margin-top:20px;
    }
    .red{
        color:red;
    }
    .bcr-top li{
        float:left;
        height:66px;
        color:#333;
    }
    .bcr-top li:nth-child(1){
        width:66px;
        background:#eee;
    }
    .bcr-top li:nth-child(2){
        margin-left:15px;
        //min-width:150px;
    }
    .bcr-top li:nth-child(3){
        min-width:150px;
        margin-left:5%;
    }
    .bcr-top li:nth-child(4){
        margin-left:40px;
        min-width:150px;

    }
    .bcr-top{
        width:98%;
        min-width:600px;
        height:86px;
        margin:0 auto;
        font-weight:normal;
    }
    .bcl-top{
        position:relative;
        width: 98%;
        margin:0 auto;
        //min-width:400px;
        min-width: 500px;
    }
    .paga{
         margin-top:20px;
    }
    .list1,.list2{
        float:left;
        width:50%;
        text-align:center;
    }
    .list2{
        color:#5b5bf4;
    }
    .bcl-content li{
        width:100%;
        height:56px;
        line-height:56px;
        border-bottom:1px solid #eee;
        margin-top:10px;
    }
    .btn{
        width:96px;
        height:44px;
        margin-left:10px;
        padding:0;
        line-height:44px;
        font-size: 16px;
        span{
            position:relative;
            top:-10px;
        }
    }
    .inp{
        width:150px;
        height:44px;
        margin-left:10px;
    }
    .el-select-dropdown__item{
        height:44px!important;
    }
    #auth-apply-wait{
        font-size:16px;
        width::100%;
        height:100%;
    }
    body .sub-router{
        display:flex;
        padding:0;
    }
    .box-card-right{
      overflow-y:scroll; 
    }
    .box-card-left,.box-card-right{
        float:left;
        color:#333;
    }
   @media screen and(max-width: 1600px){ 
        .box-card-left{
            height:100%;
            width:510px;
            min-width:510px;
            margin:0!important;
            margin-left:20px!important;
            margin-top:20px!important;
        }
        .box-card-right{
        //flex:2;
        //width:68%;
        min-width:565px;
        width:620px;
        margin:0!important;
        margin-top:20px!important;
        margin-left:20px!important;
        height:100%;
       }
      .tabdiv{
          //height:500px;
      }

       .nav{
        height:36px;
      }
       .nav li{
          height:36px;
          position: relative;
          .cuijc{
            position: absolute;
            left:216px;
          }
       }
       .nav li span{
            //float: left;
       }
       .nav li a{
          left:120px;
          width:130px;
          position: absolute;
          white-space: nowrap; 
          overflow: hidden; 
          /*文字超出用省略号*/  
          text-overflow:ellipsis;  
       }
       .nav li .lasta{
           left:120px;
       }
       .nav li .lastb{
          left:160px;
       }
       .tit-a{
        float: left;
       }
       /* .tit-a a,span{
           display: inline-block;
       } */
       .tit-a a{
          margin-top:10px;
       }
       .box-card-left .el-table{
          height:538px;
          overflow-y:scroll; 
       }
    }
   @media screen and(min-width: 1600px){ 
        .box-card-left{
            height:100%;
            width:700px;
            margin:0!important;
            margin-left:20px!important;
            margin-top:20px!important;
            overflow-y:scroll; 
        }
        .box-card-right{
        //flex:2;
        //width:68%;
        overflow-y:scroll; 
        width:900px;
        margin:0!important;
        margin-top:20px!important;
        margin-left:20px!important;
        height:100%;
       }
       .box-card-left .el-table{
          max-height:650px;
          overflow-y:scroll; 
       }
    }
    @media screen and(min-width: 2000px){ 
        .box-card-left{
            height:100%;
            width:800px;
            margin:0!important;
            margin-left:20px!important;
            margin-top:20px!important;
        }
        .box-card-right{
        //flex:2;
        //width:68%;
        width:1000px;
        margin:0!important;
        margin-top:20px!important;
        margin-left:20px!important;
        height:100%;
       }
       .box-card-left .el-table{
          max-height:750px;
          overflow-y:scroll; 
       }
    }
   .title1{
    margin-top:20px;
   }
   .nav2{
        height:130px;
        display:flex;
   }
   .nav2 li{
        flex:1;
        float:left;
        width:200px;
        height:130px;
        background:#eee;
        margin-left:10px;
   }
   .nav2 li:nth-child(1){
    margin-left:0px;
   }
   .mrl{
    margin-left: 10px;
   }
</style>